<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            //找到所有元素
            var items = document.getElementsByName('item');
            //全选和全不选的按钮
            var checkAll = document.getElementById('checkAll');
            

            //给全选框添加单击事件函数
            document.getElementById('checkAllBtn').onclick = function(){
                //找到所有元素
                for(var i = 0; i<items.length; i ++){
                    items[i].checked = true;
                }
                checkAll.checked = true;
            }

            //给全不选框添加单击事件函数
            document.getElementById('checkAllNoBtn').onclick = function(){
                for(var i = 0;i<items.length; i ++){
                    items[i].checked =false;
                }
                checkAll.checked = false;
            }

            //给反选框添加单击事件函数
            document.getElementById('checkReBtn').onclick = function(){
                checkAll.checked = true;
                for(var i = 0;i<items.length;i ++){
                    if(items[i].checked){
                        items[i].checked = false;
                    }else{
                        items[i].checked = true;
                    }
                    if(items[i].checked == false){
                            checkAll.checked = false;
                        }
                }
            }

            //给提交按钮添加单击事件函数
            document.getElementById('send').onclick = function(){
                for(var i = 0;i<items.length;i ++){
                    if(items[i].checked){
                        alert(items[i].value)
                    }
                }
            }

            //给全选/全不选框添加单击事件函数
            document.getElementById('checkAll').onclick = function(){
                for(var i = 0;i<items.length;i ++){
                    items[i].checked = this.checked;

                }
            }

            //给items设置单击相应函数
            for(var i = 0;i<items.length;i ++){
                items[i].onclick = function(){
                    checkAll.checked = true;
                    for(var j = 0;j<items.length; j++){
                        if(items[j].checked == false){
                            checkAll.checked = false;
                            break;
                        }
                    }
                }
            }
        }
    </script>
    <style>
        div{
            width: 350px;
            margin: 50 auto;
            background-color:lightblue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <span>你拥有以下哪些角色？</span>
        <input type="checkbox" id="checkAll" value="全选/全不选">全选/全不选<br>
        <input type="checkbox" name="item" value="枫原万叶">枫原万叶
        <input type="checkbox" name="item" value="可丽">可丽
        <input type="checkbox" name="item" value="刻晴">刻晴
        <input type="checkbox" name="item" value="魈">魈
        <input type="checkbox" name="item" value="钟离">钟离<br>
        <input type="button" id="checkAllBtn" value="全选">
        <input type="button" id="checkAllNoBtn" value="全不选">
        <input type="button" id="checkReBtn" value="反选"><br>
        <input type="submit" id="send" value="提交">
    </div>
</body>
</html>